<script src="@{'/public/javascripts/app/thickbox.js'}" type="text/javascript" charset="UTF-8"></script>
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/thickbox.css'}">

<input type="hidden" name="bean.buildsStr" value="${_builds}">
<input type="hidden" name="bean.buildsIds" value="${_buildIds}">
<table id="softwareReadTable" class="read">
	<thead>
		<tr>
			<th help="CDRelease">Release</th>
			<th help="CDPackage">Build</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<table id="softwareEditTable" class="edit">
	<thead>
		<tr>
			<th help="CDRelease">Release</th>
			<th help="CDPackage">Build</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input id="release" type="text" class="width100" ></td>
			<td><input id="build" type="text" class="width100" ></td>
			<td><a href="javascript:void(0)" class="button thickbox" onclick="javascript:searchSBList();"><span class="icon icon19"></span><span class="label">Search</span></a></td>
			<td><a href="javascript:void(0)" class="button" onclick="javascript:deleteSB();"><span class="icon icon186"></span><span class="label">Delete</span></a></td>
			<td><a href="javascript:void(0)" class="button" onclick="javascript:addSB();"><span class="icon icon3"></span><span class="label">Add</span></a></td>
		</tr>
	</tbody>
</table>

<script type="text/javascript">
	function searchSBList() {
		var release = $.trim($("#release").val()) == "" ? "%" : $.trim($("#release").val());
		var build = $.trim($("#build").val()) == "" ? "%" : $.trim($("#build").val());
		
		$(".thickbox").attr("href", "/swBuild/" + release + "/" + build + "?KeepThis=true&TB_iframe=true&height=400&width=600");
	}
	function deleteSB(){
		var sbs = "";
		$("#softwareEditTable input[type=checkbox].todo:checked").each(function(){
			$(this).parent().parent().remove();
		})
		updateSB();
	}
	function addSB(){
		var release = $.trim($("#release").val());
		var build = $.trim($("#build").val());
		if(release == "" || build == ""){
			alert("if you want to add directly, please input both release and build!");
			return;
		}else{
			release += "," + "eq";
			build += "," + "eq";
			$.ajax({
				url:"/checkSB/" + release + "/" + build,
				dataType:"json",
				type:"GET",
				success:function(result){
					appentTable(result.release,result.build,result.id);
					updateSB();
				}
			});
		}
	}
	function updateSB(){
		var sbs = "";
		var sbIds = "";
		$("#softwareEditTable tr.contents").each(function(){
			sbs += $(this).find("td")[0].innerHTML + "," + $(this).find("td")[1].innerHTML + ";";
			sbIds += $($(this).find("input")[0]).attr("buildId") + ",";
		});
		
		$("input[name=bean\\.buildsStr]").val(sbs.slice(0,-1));
		$("input[name=bean\\.buildsIds]").val(sbIds.slice(0,-1));
	}
	function renderSB(){
		// empty table before render
		$("#softwareReadTable tbody").empty();
		$("#softwareEditTable tr.contents").remove();
		
		if($("input[name=bean\\.buildsStr]").val() != "" && $("input[name=bean\\.buildsIds]").val() != ""){
			var sbs = $("input[name=bean\\.buildsStr]").val().split(";");
			var sbIds = $("input[name=bean\\.buildsIds]").val().split(",");
			for(var i = 0; i < sbs.length; i++){
				appentTable(sbs[i].split(",")[0],sbs[i].split(",")[1],sbIds[i]);
			}
		}
	}
	function appentTable(release,builds,id){		
		$("#softwareReadTable tbody").append("<tr>");
		$("#softwareReadTable tbody").append("<td>" + release + "</td>");
		$("#softwareReadTable tbody").append("<td>" + builds + "</td>");
		$("#softwareReadTable tbody").append("</tr>");
		
		$("#softwareEditTable tr:last").before("<tr class='contents'>" + "<td>" + release + "</td>" + "<td>" + builds + "</td>" + "<td><input type='checkbox' class='todo' buildId=" + id + "></td>" + "</tr>");
	}
</script>